<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-page-header
        :content="
          route.query.id
            ? route.query.detail == 0
              ? '编辑活动详情'
              : '抢购活动详情'
            : '新增抢购活动'
        "
        @back="router.back()"
      />
    </el-card>
    <el-card class="!border-none mt-[15px]" shadow="never">
      <div class="font-medium mb-7">活动设置</div>
      <el-form
        ref="formRef"
        :model="formData"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="活动名称" prop="name">
          <div>
            <el-input
              :disabled="!!route.query.id && !!Number(route.query.detail)"
              v-model="formData.name"
              placeholder="请输入活动名称"
              class="w-[380px]"
              maxlength="20"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="活动时间" prop="name">
          <div class="w-[340px]">
            <daterange-picker
              :disabled="
                route.query.id &&
                (!!Number(route.query.detail) || route.query.status == 2)
              "
              v-model:startTime="formData.start_time"
              v-model:endTime="formData.end_time"
            />
          </div>
        </el-form-item>
        <el-form-item label="活动备注" prop="remark">
          <el-input
            :disabled="!!route.query.id && !!Number(route.query.detail)"
            v-model="formData.explain"
            placeholder="请输入活动名称"
            class="w-[380px]"
            maxlength="20"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-[15px]" shadow="never">
      <div class="font-medium mb-7">活动商品</div>
      <el-form
        ref="formRef"
        :model="formData"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="抢购商品" prop="goods">
          <div>
            <div>
              <el-button
                type="primary"
                @click="handleselect"
                :disabled="
                  route.query.id &&
                  (!!Number(route.query.detail) || route.query.status == 2)
                "
                >选择商品</el-button
              >
              已选择{{ goodslists?.length || 0 }}件商品
              <el-button
                link
                type="primary"
                @click="handleclearAll"
                :disabled="
                  route.query.id &&
                  (!!Number(route.query.detail) || route.query.status == 2)
                "
                >清空</el-button
              >
            </div>
            <div class="w-[1200px]">
              <el-table size="large" class="mt-[14px]" :data="goodslists">
                <el-table-column label="商品信息" width="240px">
                  <template #default="{ row }">
                    <div class="flex items-center">
                      <el-avatar
                        :src="row.image || row.goods_image"
                        style="height: 60px; min-width: 60px"
                      />

                      <div class="ml-[10px] text_hidden">
                        {{ row.goods_name }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="商品价格" prop="sell_price">
                  <template #default="{ row }">
                    ￥{{ row.sell_price || row.goods_price }}
                  </template>
                </el-table-column>
                <el-table-column label="商品库存">
                  <template #default="{ row }">
                    {{ row.goods_stock || row.stock }}
                  </template>
                </el-table-column>
                <el-table-column label="抢购价格">
                  <template #default="scoppe">
                    <el-input
                      v-model="formData.goods[scoppe.$index].seckill_price"
                      placeholder="请输入"
                      :disabled="
                        route.query.id &&
                        (!!Number(route.query.detail) ||
                          route.query.status == 2)
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="抢购库存">
                  <template #default="scoppe">
                    <el-input
                      v-model="formData.goods[scoppe.$index].seckill_stock"
                      placeholder="请输入"
                      :disabled="
                        route.query.id &&
                        (!!Number(route.query.detail) ||
                          route.query.status == 2)
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="限购" prop="stock">
                  <template #default="scoppe">
                    <el-input
                      v-model="formData.goods[scoppe.$index].quota"
                      placeholder="请输入"
                      :disabled="
                        route.query.id &&
                        (!!Number(route.query.detail) ||
                          route.query.status == 2)
                      "
                    ></el-input>
                  </template>
                </el-table-column>

                <el-table-column label="操作" prop="sn">
                  <template #default="{ row }">
                    <el-button
                      type="primary"
                      link
                      @click="handleclear(row.id)"
                      :disabled="
                        route.query.id &&
                        (!!Number(route.query.detail) ||
                          route.query.status == 2)
                      "
                      >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <selectpopup
      v-if="showselect"
      ref="selectRef"
      @close="showselect = false"
      @success="handleselected"
      :selected="goodslists"
    ></selectpopup>
  </div>
  <footer-btns v-perms="['']">
    <el-button type="primary" @click="handleSubmit">保存</el-button>
  </footer-btns>
</template>
<script lang="ts" setup>
import selectpopup from "./component/selectgoods.vue";
import useAppStore from "@/stores/modules/app";
import type { FormInstance, FormRules } from "element-plus";
import { addseckill, editseckill, seckilldetial } from "@/api/application";

const appStore = useAppStore();

const route = useRoute();

const router = useRouter();
const formData: any = ref({
  id: "",
  name: "",
  start_time: "",
  end_time: "",
  goods: [{}],
  explain: "",
});
//表单校验
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: "请输入活动名称",
      trigger: ["blur", "change"],
    },
  ],
  activetime: [
    {
      required: true,
      message: "请选择活动时间",
      trigger: ["blur"],
    },
  ],

  goods: [
    {
      required: true,
      message: "请输入",
      trigger: ["blur", "change"],
    },
  ],
});
const getData = async () => {
  if (!route.query.id) return;
  const res = await seckilldetial({ id: route.query.id });
  formData.value = res;
  formData.value.goods = res.seckill_goods;
  goodslists.value = formData.value.seckill_goods;
};
getData();
//展开选择商品框
const showselect = ref(false);
const selectRef = shallowRef<InstanceType<typeof selectpopup>>();
const handleselect = async () => {
  showselect.value = true;
  await nextTick();
  selectRef.value?.open();
};
const goodslists = ref([]);
const handleselected = (val: any) => {
  showselect.value = false;
  goodslists.value = val;
  formData.value.goods = val.map((item: any) => {
    return { goods_id: item.id };
  });
};

const handleclearAll = () => {
  (goodslists.value = []), (formData.value.goods = []);
};
const handleclear = (id: any) => {
  goodslists.value = goodslists.value.filter((item: any) => {
    return item.id != id;
  });
  formData.value.goods = formData.value.goods.filter((item: any) => {
    return item.goods_id != id;
  });
};
//保存
const handleSubmit = async () => {
  // await formRef.value?.validate()

  if (route.query.id) {
    await editseckill(formData.value);
  } else {
    await addseckill(formData.value);
  }

  router.back();
};
</script>
<style lang="scss" scope>
.preview {
  width: 375px;
  box-sizing: border-box;
  flex: none;
  height: 722px;
  border: 1px solid hsla(0, 0%, 89.8%, 0.898039);
  display: flex;
  flex-direction: column;
}

.title {
  background: #f5f8ff;
  height: 40px;
  border-bottom: 1px solid hsla(0, 0%, 89.8%, 0.898039);
}
</style>
